<template>
	<view class="container">
		<div v-for="(file, index) in fileList" :key="index" class="case-file">
			<label class="case-file-linkname">{{file.linkName}}</label>
			<ul class="case-file-list">
				<li v-show="file.files[0].fs.length>0" class="case-file-list-cell">
					<img style="width:100px;height:100px;margin-left:10px;" v-for="(f,ind) in file.files[0].fs" :key="ind" :src="f.fileUrlFm" :title="f.attName"/>
				</li>
				<li v-show="file.files[1].fs.length>0" class="case-file-list-cell">
					<a v-for="(f,ind) in file.files[1].fs" :key="ind" :href="f.fileUrlFm" target="_blank" style="margin-left:10px;">
						<img src="/images/img_word.png" :title="f.attName" style="width:100px;height:100px;"/>
					</a>
				</li>
				<li v-show="file.files[2].fs.length>0" class="case-file-list-cell">
					<video v-for="(f,ind) in file.files[2].fs" :title="f.attName" :key="ind" :href="f.fileUrlFm" style="width:100px;height:100px;"></video>
				</li>
				<li v-show="file.files[3].fs.length>0" class="case-file-list-cell">
					<a v-for="(f,ind) in file.files[3].fs" :title="f.attName" :key="ind" :href="f.fileUrlFm" target="_blank" style="margin-left:10px;">
						<img src="/images/img_other.jpg" style="width:100px;height:100px;"/>
					</a>
				</li>
			</ul>
		</div>
	</view>
</template>

<script>
	import { getCaseAttachList } from "@/api/dums/caw/cawAttach";
	import { fileServerUrl } from "@/config.js";
	export default {
		name: "caseFiles",
		props:{
			selectedCase:{
				type:Object
			}
		},
		data() {
			return {
				fileList: [],
			}
		},
		mounted(){
			console.log("123---"+this.selectedCase.caseId);
			this.getCaseAttachList(this.selectedCase.caseId)
		},
		methods:{
			//查询案件附件信息
			getCaseAttachList(caseId) {
				this.imgFiles = [];
				this.fileList = [];
				let attTypeArr={"I":0,"W":1,"V":2,"O":3};
				getCaseAttachList({ caseId: caseId }).then((res) => {
					if (res.rows) {
						res.rows.map((item) => {
							item.fileUrlFm=fileServerUrl + item.fileUrl;
							var ind=-1;
							//查询当前附件在数组中是否有对应环节
							this.fileList.map((file, i)=>{
								if(item.linkName == file.linkName){
									ind=i;
								}
							});
							if(ind == -1){
								//新建个对象
								this.fileList.push({
									linkName: item.linkName,
									files:[{
									  attType: "I",
									  fs: []
									},{
									  attType: "W",
									  fs: []
									},{
									  attType: "V",
									  fs: []
									},{
									  attType: "O",
									  fs: []
									},]
								});
								this.fileList[this.fileList.length-1].files[attTypeArr[item.attType]].fs.push(item);
							}else{
								this.fileList[ind].files[attTypeArr[item.attType]].fs.push(item);
							}
						});
					}
				});
			},
		}
	}
</script>

<style>
	ul{
		list-style: none;
		margin:0;
		padding:0;
	}
	.case-file-list-cell{
		margin-top:10px;
	}
	.case-detail-oper{
		margin-bottom: 10px;
		margin-left:20px;
	}
	.case-detail-oper i{
		width:28px;
		height:28px;
		font-size: 20px;
		padding:4px;
		color:#2359C1;
	}
	.tool-icon:not(:first){
		margin-left:10px;
	}
	.case-detail-oper i:hover{
		background:#2359C1;
		color:#fff;
	}
</style>